<template>
  <el-dialog :visible.sync="visible" :title="'选择历史时间点'" :close-on-click-modal="false" :close-on-press-escape="false" width="300px">
    <el-col :span="24">
      <el-form :inline="true" :model="dataForm">
        <el-form-item>
          <el-date-picker v-model="pickerVal.day" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期"
            v-show="dataForm.cycleType === CDATA.VALUE_DAY">
          </el-date-picker>
          <el-date-picker v-model="pickerVal.month" type="month" format="yyyy年M月" value-format="yyyy-MM" placeholder="选择月份"
            v-show="dataForm.cycleType === CDATA.VALUE_MONTH">
          </el-date-picker>
          <!-- 周的value-format格式化会报错 先去掉，代码里面处理 -->
          <el-date-picker v-model="pickerVal.week" type="week" format="yyyy年第W周" placeholder="选择周" :picker-options="{firstDayOfWeek: 1}"
            v-show="dataForm.cycleType === CDATA.VALUE_WEEK"> </el-date-picker>
          <el-date-picker v-model="pickerVal.year" type="year" format="yyyy年" value-format="yyyy" placeholder="选择年"
            v-show="dataForm.cycleType === CDATA.VALUE_YEAR">
          </el-date-picker>
          <uniPickerQuarterly v-model="pickerVal.quarterly" v-show="dataForm.cycleType === CDATA.VALUE_QUARTERLY"></uniPickerQuarterly>
          <uniPickerYearhalf v-model="pickerVal['year_half']" v-show="dataForm.cycleType === CDATA.VALUE_YEAR_HALF"></uniPickerYearhalf>
        </el-form-item>
      </el-form>
    </el-col>
    <template slot="footer">
      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
      <el-button type="primary" :loading="loading" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
    </template>
  </el-dialog>
</template>
<script>
import debounce from 'lodash/debounce'
import uniPickerQuarterly from '@/components/uni-picker-quarterly'
import uniPickerYearhalf from '@/components/uni-picker-yearhalf'
import CDATA from './common/constant'

export default {
  data () {
    return {
      CDATA: CDATA,
      loading: false,
      visible: false,
      pickerVal: {},
      dataForm: {
        cycleType: 'day'
      }
    }
  },
  components: {
    uniPickerQuarterly, uniPickerYearhalf
  },
  props: {
    value: { required: false },
    backFun: {
      required: false,
      type: Function
    }
  },
  computed: {
    dataRule () {
      return {
      }
    }
  },
  methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
        // console.log(1, this)
      })
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      if (this.backFun) {
        this.backFun(this.dataForm.cycleType, this.pickerVal)
      }
      this.visible = false
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>
